<template>
	<div class="nr">
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(item, index) in swiper" :key="index"><img :src="item" /></van-swipe-item>
		</van-swipe>
		<div class="recommend"></div>
		<div><div v-html="text" class="text_img"></div></div>
		<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
			<van-card
			  :price="listinfo.minPrice"
			  :desc="listinfo.characteristic"
			  :title="listinfo.name"
			  :thumb="listinfo.pic"
			/>
			<button @click="onClickGoCart(listinfo)">确定加入购物车</button>
		</van-popup>
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
			<van-goods-action-icon icon="cart-o" text="购物车" />
			<van-goods-action-icon icon="star" text="收藏" />
			<van-goods-action-button type="warning" text="加入购物车" @click="showPopup" />
			<van-goods-action-button type="danger" text="立即购买"  />
		</van-goods-action>
	</div>
	
</template>

<script>
import './css/aa.css';
import mutationTypes from "../store/config.js";
export default {
	data() {
		return {
			listinfo: [],
			text: '',
			swiper:[],
			show: false
		};
	},
	methods: {
		showPopup() {
			this.show = true;
		},
		showdenger() {
			this.plus(this.listinfo)
			console.log(this.listinfo)
		},
	onClickGoCart(item) {
	  //点击加入购物车
	  
      this.isShow = false;
      var obj = {
        item,
        num: this.num,
	  };
	  this.$store.commit(mutationTypes.ONADDGOODS, obj);
    },
	},
	created() {
		let id = this.$route.query.id;
		this.$APIurl
			.boutique({
				params: {
					id: id
				}
			})
			.then(res => {
				this.listinfo = res.data.data.basicInfo;
				this.swiper = res.data.data.pics2;
				console.log(this.listinfo);
				this.text = res.data.data.content;
			});

			
	}
};
</script>

<style scoped>
.nr {
	margin-top: 50px;
}
.my-swipe img {
	width: 100%;
	height: 200px;
}

.text_img img {
	width: 100px;
	height: 100px;
}
.recommend {
	width: 100%;
	/* height: 50px;
	background-color: #D81E06; */
}
</style>
